<script setup>
</script>
<template>
  <div>
    <el-form :inline="true" :model="query" align="left" >
      <el-form-item label="代驾员" :label-width="formLabelWidth">
        <el-select v-model="query.tid" placeholder="请选择代驾员">
          <el-option v-for="item in list " :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="订单状态" :label-width="formLabelWidth">
        <el-select v-model="query.state" placeholder="订单状态">
          <el-option label="完成" value="完成"></el-option>
          <el-option label="等待中" value="等待中"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="findPage" :inline="true">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="add" :inline="true">新增代驾单</el-button>
      </el-form-item>
    </el-form>
    <el-table
        :data="tableData"
        border
        style="width: 100%"
    >
      <el-table-column
          prop="id"
          label="编号">
      </el-table-column>
      <el-table-column
          prop="name"
          label="代驾车辆">
      </el-table-column>
      <el-table-column
          prop="num"
          label="里程数(公里)">
      </el-table-column>
      <el-table-column
          prop="address"
          label="目的地">
      </el-table-column>
      <el-table-column
          prop="tname"
          label="代驾员">
      </el-table-column>
      <el-table-column
          prop="tphone"
          label="代驾员电话"
          width="180">
      </el-table-column>
      <el-table-column
          prop="state"
          label="状态">
      </el-table-column>
      <el-table-column
          prop="createtime"
          label="下单时间"
          width="180">
        <template slot-scope="scope">
          {{scope.row.createtime|format("yyyy-MM-dd")}}
        </template>
      </el-table-column>
      <el-table-column
          prop="endtime"
          label="送达时间"
          width="180">
        <template slot-scope="scope">
          {{scope.row.endtime|format("yyyy-MM-dd")}}
        </template>
      </el-table-column>
<el-table-column
    label="操作"
    width="180">
<template slot-scope="scope">
  <el-button type="primary"  @click="add2(scope.row)">派单</el-button>
  <el-button type="primary" v-if="scope.row.state=='待派送'" @click="del(scope.row)">取消</el-button>
</template>
</el-table-column>
</el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.page"
        :page-sizes="[1, 2, 3, 4]"
        :page-size="query.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
    <el-dialog :title="this.mode.s" :visible.sync="dialogVisible">
    <el-form :model="form">
      <el-form-item label="代价车辆" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="里程数(公里)" :label-width="formLabelWidth">
        <el-input v-model="form.num" type="number" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="目的地" :label-width="formLabelWidth">
        <el-input v-model="form.address"  autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="goUp">确 定</el-button>
    </div>
  </el-dialog>
    <el-dialog :title="this.mode.s" :visible.sync="dialogVisible1">
      <el-form :model="form">
        <el-form-item label="派送物品" :label-width="formLabelWidth">
          <el-input v-model="'车辆:'+form.name+'里程：'+form.num" :disabled="true"  autocomplete="off" ></el-input>
        </el-form-item>
        <el-form-item label="目的地" :label-width="formLabelWidth">
          <el-input v-model="form.address" :disabled="true"  autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="代驾员" :label-width="formLabelWidth">
          <el-select v-model="form.tid" placeholder="请选择派送员">
            <el-option v-for="item in list " :key="item.id" :label="item.name" :value="item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item label="到达日期" :label-width="formLabelWidth">
          <el-date-picker v-model="form.endtime" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="goUp">派单</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<style scoped>
</style>
<script>
export default {
  data(){
    return {
      formLabelWidth: '120px',
      query:{
        page:1,
        size:3,
        state:"",
        tid:'',
      },
      list:[],
      mode:{
        s:"",
      },
      form:{},
      tableData:[],
      total:0,
      dialogVisible:false,
      dialogVisible1:false
    }
  },
  created(){
    this.findPage();
    this.findAll();
  },
  methods:{
    findPage(){
      this.axios.post("http://localhost:9000/pai/findPage",this.query).then(res=>{
        this.tableData=res.data.records;
        this.total=res.data.total;
      })
    },
    handleSizeChange(val) {
      this.query.size = val;
      this.findPage();
    },
    handleCurrentChange(val) {
      this.query.page = val;
      this.findPage();
    },
    findAll(){
      this.axios.get("http://localhost:9000/type/findAll").then(res=>{
        this.list=res.data;
      })
    },
    add(){
      this.mode.s="新增代驾单";
      this.dialogVisible=true;
      this.mode.url="http://localhost:9000/pai/add";
      this.form.state="待派送"
      this.form.createtime=new Date();
      this.form.endtime="";
    },
    add2(row){
      this.form=row;
      this.mode.s="派单";
      this.dialogVisible1=true;
      this.mode.url="http://localhost:9000/pai/update";
      this.form.state="完成"
    },
    del(row){
      this.axios.get("http://localhost:9000/pai/delete?id="+row.id).then(res=>{
        if(res.data.code==0){
          this.$message.success("删除成功")
        }else{
          this.$message.error("删除失败")
        }
        this.findPage();
      })
    },
    goUp(){
      this.axios.post(this.mode.url,this.form).then(res=>{
        if(res.data.code==0){
          this.$message.success(this.mode.s+"成功")
          this.form={};
        }else{
          this.$message.error(this.mode.s+"失败")
          this.form={};
        }
        this.dialogVisible=false;
        this.dialogVisible1=false;
        this.findPage();
      })
    },
  },
  filters:{
    format(value,arg){
      function dateFormat(date, format) {
        if (typeof date === "string") {
          var mts = date.match(/(\/Date\((\d+)\)\/)/);
          if (mts && mts.length >= 3) {
            date = parseInt(mts[2]);
          }
        }
        date = new Date(date);
        if (!date || date.toUTCString() == "Invalid Date") {
          return "";
        }
        var map = {
          "M": date.getMonth() + 1, //月份
          "d": date.getDate(), //日
          "h": date.getHours(), //小时
          "m": date.getMinutes(), //分
          "s": date.getSeconds(), //秒
          "q": Math.floor((date.getMonth() + 3) / 3), //季度
          "S": date.getMilliseconds() //毫秒
        };
        format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
          var v = map[t];
          if (v !== undefined) {
            if (all.length > 1) {
              v = '0' + v;
              v = v.substr(v.length - 2);
            }
            return v;
          } else if (t === 'y') {
            return (date.getFullYear() + '').substr(4 - all.length);
          }
          return all;
        });
        return format;
      }

      return dateFormat(value,arg);

    }
  },
}
</script>